<script setup>
// this.$refs.h1Ref
import { onMounted, ref } from 'vue'
import Son from './components/Son.vue'

// =========== 获取DOM实例 ===========
// 1. 创建空 ref
const h1Ref = ref(null)
// 3. 组件挂载完毕后，就能获取 DOM 节点了
onMounted(() => {
  console.log(h1Ref.value)
})

// =========== 获取组件实例 ===========
const sonCom = ref(null)
onMounted(() => {
  console.log(sonCom.value)
})
const btn = () => {
  // 🚨注意：调用组件实例的方法，组件内部需要 defineExpose 暴露
  // this.$refs.sonCom.sayHi()
  sonCom.value.sayHi()
}
</script>

<template>
  <!-- 2. 模板中建立关联，模板挂载完毕后，自动把DOM节点的内存地址给 ref -->
  <h1 ref="h1Ref">Hello vue3</h1>
  <button @click="btn">点击调用子组件暴露的方法</button>
  <Son ref="sonCom" />
</template>
